<template>
  <div>
    <el-drawer
      v-model="isOpen"
      :title="title"
      :size="size"
      :destroy-on-close="destroyOnClose"
    >
      <div class="flex flex-col w-[100%] h-[100%]">
        <div class="flex-1 overflow-auto">
          <slot></slot>
        </div>
        <div class="leading-6">
          <el-button type="primary" @click="submit" :loading="loading">{{
            comfirmText
          }}</el-button>
          <el-button type="default" @click="showDrawer(false)">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
const loading = ref(false)
const showDrawer = (bol) => (isOpen.value = bol)

const showLoading = (bol) => (loading.value = bol)

defineProps({
  title: String,
  size: {
    type: String,
    default: '45%',
  },
  comfirmText: {
    type: String,
    default: '提交',
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['submit'])

const submit = () => emit('submit')

// 向父组件暴露方法
defineExpose({
  showDrawer,
  showLoading,
})
</script>
